<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../libs/layui/css/layui.css" />
        <title>Layui - 表单方框风格 (v2.6.8)</title>
    </head>
    <body style="padding: 15px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required="" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                    <div class="layui-unselect layui-form-select">
                        <div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" /><i class="layui-edge"></i></div>
                        <dl class="layui-anim layui-anim-upbit">
                            <dd lay-value="" class="layui-select-tips">请选择</dd>
                            <dd lay-value="0" class="">北京</dd>
                            <dd lay-value="1" class="">上海</dd>
                            <dd lay-value="2" class="">广州</dd>
                            <dd lay-value="3" class="">深圳</dd>
                            <dd lay-value="4" class="">杭州</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch" />
                    <div class="layui-unselect layui-form-switch" lay-skin="_switch"><em></em><i></i></div>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" />
                    <div class="layui-unselect layui-form-radio">
                        <i class="layui-anim layui-icon"></i>
                        <div>男</div>
                    </div>
                    <input type="radio" name="sex" value="女" title="女" checked="" />
                    <div class="layui-unselect layui-form-radio layui-form-radioed">
                        <i class="layui-anim layui-icon"></i>
                        <div>女</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="formDemoPane">立即提交</button>
            </div>
        </form>

        <script type="text/javascript">
            layui.use('form', function () {
                var form = layui.form;

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
    </body>
</html>
